<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px" @close="close">
    <el-form ref="form" label-width="160px" :model="form" :rules="rules">
      <el-form-item v-if="!isAdd" label="维度" prop="keyItem">
        <el-input v-model.trim="form.keyItem" autocomplete="off" :disabled="true" />
      </el-form-item>
      <el-form-item label="检测项" prop="type">
        <el-input v-model.trim="form.type" autocomplete="off" :disabled="true" />
      </el-form-item>
      <el-form-item label="检测结果" prop="value">
        <el-input v-model.trim="form.value" autocomplete="off" :disabled="true" />
      </el-form-item>
      <el-form-item label="文案" prop="text">
        <el-input v-model.trim="form.text" autocomplete="off" type="textarea" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { doEdit } from '@/api/configration'
  // import { getEditPrizeConfigProps } from '../../utils.js'
  export default {
    name: 'TableEdit',
    data() {
      return {
        isAdd: false,
        form: {
          text: '',
          keyItem: '',
          type: '',
          value: '',
        },
        list: {},
        rules: {
          text: [{ required: true, trigger: 'blur', message: '请输入文案' }],
          keyItem: [{ required: true, trigger: 'blur', message: '请输入维度' }],
          type: [{ required: true, trigger: 'blur', message: '请输入检测项' }],
          value: [{ required: true, trigger: 'blur', message: '请输入检测结果' }],
        },
        title: '',
        dialogFormVisible: false,
        defaultContinuous: '',
      }
    },
    created() {},
    methods: {
      showEdit(list, row) {
        console.log('显示', list)
        if (!row) {
          this.title = '添加相关肌肤指标文案'
          this.isAdd = true
        } else {
          this.title = '编辑相关肌肤指标文案'
          this.form = Object.assign({}, row)
          this.isAdd = false
          // this.defaultContinuous = this.from.continuous
        }
        this.list = list
        this.dialogFormVisible = true
      },
      close() {
        console.log('close----')
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
        this.$emit('fetch-data')
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.$forceUpdate()
            console.log(this.form, '....save....skinAnalysis.....', this.list)
            if (
              this.form &&
              typeof this.form === 'object' &&
              this.list &&
              typeof this.list === 'object'
            ) {
              let key = this.form.keyName
              let index = this.form.index
              let item = this.list[key]
              if (item && Array.isArray(item)) {
                let obj = { ...this.form }
                delete obj.keyName
                delete obj.index
                delete obj.keyName
                item[index] = obj
              }
              const props = {
                configValue: this.list,
                configItem: 'skinAnalysis',
              }
              let { data, error } = await doEdit(props).catch((err) => {
                this.$baseMessage('接口报错', 'error')
              })
              if (error) {
                this.$baseMessage(error || '接口报错', 'error')
              } else {
                this.$baseMessage('操作成功', 'success')
                this.close()

                // this.$emit('fetch-data')
              }
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>
